<%= include ic/header.html %>
<style>
#nav_my{color:#fff}
body{background:#f7f7f7;}
footer{display:none;}
#main{text-align:center;}
#content{width:100%;margin:auto;overflow:hidden;}
@media only screen and (min-width: 1008px){
  #content{width:80%;min-width:1008px;}
}
#titleBar{width:auto;height:50px;border-bottom:1px solid #95989a;line-height:50px;float:left;overflow:hidden;}
#titleBar span{float:left;line-height:60px;font-size:2rem;color:#111;font-weight:600;}
#titleBar span a{font-weight:400;font-size:1.6rem;}
#titleBar span~span{padding:0 30px;}
#ctrlBar span{height:60px;line-height:60px;float:left;}
#ctrlBar span~span{padding:0 30px;}
#imgList>div{height:300px;overflow:hidden;margin-bottom:4px;cursor:pointer;}
#imgList div.am-u-sm-2{padding:0!important;}
#imgList div.line1.am-u-sm-5{padding-right:0!important;padding-left:4px!important;}
#imgList div.line2.am-u-sm-5{padding-left:0!important;padding-right:4px!important;}
#imgList .selectBar{width:100%;height:50px;background:rgba(0,0,0,0.7);position:absolute;bottom:0;left:0;line-height:50px;font-size:25px;text-align:right;}
#imgList .c .selectBar{color:#fff;}
#imgList .selectBar span{float:right;margin-right:10px;display:none!important;font-weight:100!important;}
#imgList .c .selectBar span.am-icon-check-circle-o,#imgList .d span.am-icon-check-circle{display:inline!important;}
</style>
<div id="main" class="am-cf">
<%= include ic/my_banner.html %>
<div id="mynav">
  <div class="nav" onclick="gotoUrl('/my/photostream')">Photostream</div>
  <div class="nav" onclick="gotoUrl('/my/album')">Ablums</div>
  <div class="nav" onclick="gotoUrl('/my/trip')">Trips</div>
  <div class="nav c" onclick="gotoUrl('/my/favorite')">Favorites</div>
  <div class="nav" onclick="gotoUrl('/my/comment')">Comments</div>
</div>
<div id="content">
  <div id="titleBar">
    <span><a href="/my/favorite?type=image">Images</a></span><span>Trips</span>
  </div>
  <div class="am-cf"></div>
  <div id="ctrlBar" class="am-cf">
    <span>Select photos to:</span>
    <span><a href="">Delete</a></span>
  </div>
  <div id="imgList" class="am-g am-cf">
    <% for(var i=0;i<results.length;i++){ %>
    <div class="<% if(i%6==0 || i%6==5){ %>am-u-sm-2<% }else{ %>am-u-sm-5<% } %> <% if(parseInt(i/3)%2==0){ %> line1<% }else{ %> line2<% } %> d" >
      <img src="/p?id=<%= results[i].get('cover').id %>&w=600" onclick="gotoUrl('/trip/detail?id=<%= results[i].id %>')">
      <div class="selectBar" onclick="selectImg(this)"><span class="am-icon-check-circle"></span><span class="am-icon-check-circle-o"></span></div>
    </div>
    <% } %>
  </div>
</div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
$(function() {
  fixImg();
  $(window).resize(function(){
    fixImg();
  });
});

function fixImg(){
  $("#imgList>div").height($("#imgList div").first().width()*4/3);
  $("#imgList>div").map(function(){
    var w=$(this).width();
    var h=$(this).height();

    if($(this).hasClass("am-u-sm-5")){
      if($(this).children("img").width()/$(this).children("img").height()>w/h){
        $(this).children("img").height(h);
        $(this).children("img").css("width","auto");
      }else{
        $(this).children("img").width(w);
        $(this).children("img").css("height","auto");
      }
      $(this).children(".selectBar").width($(this).children("img").width());
      if($(this).hasClass("line1")){
        $(this).children(".selectBar").css("left","4px");
      }
    }else{
      $(this).children("img").width(w);
      $(this).children("img").css("height","auto");
      if($(this).children("img").width()/$(this).children("img").height()>w/h){
        $(this).children("img").height(h);
        $(this).children("img").css("width","auto");
      }else{
        $(this).children("img").width(w);
        $(this).children("img").css("height","auto");
      }
    }
  });
}

function selectImg(obj){
  if($(obj).parent().hasClass("d")){
    $(obj).parent().addClass("c");
    $(obj).parent().removeClass("d");
  }else{
    $(obj).parent().addClass("d");
    $(obj).parent().removeClass("c");
  }
}
</script>
